<template>
	<div class="item" @click="go">
		<div>
			<span class="label">倒货登记号:</span>
			<span class="value">{{value.arrivalCode}}</span>
			
			<span class="status">
				<template v-if="value.stockStatus==1">未入库</template>
				<template v-else-if="value.stockStatus==2">部分入库</template>
			</span>
		</div>
		<div>
			<span class="label">供应商:</span>
			<span class="value">{{value.supplier}}</span>
		</div>
		<div>
			<span class="label">到货日期:</span>
			<span class="value">{{value.arrivalDate}}</span>
		</div>
		<div>
			<span class="label">仓库:</span>
			<span class="value">{{value.area}}</span>
		</div>
		<img  src="../../../static/images/arrow-right.png" class="arr"/>
	</div>
</template>

<script setup>
	import {ref} from 'vue'
	import {useRouter} from 'vue-router'
	//路由实例
	const router=useRouter();
	//声明属性
	const props=defineProps({
		value:{
			type:Object,
			required:false,
			default:()=>{
				return {
					id:0,
					arrivalCode:"",
					supplier:"",
					arrivalDate:"",
					area:"",
					stockStatus:1
				}
			}
			
		}
	});
	
	//方法
	function go(){
		router.push({path:"/stockpending",query:{"id":props.value.id}});
	}
</script>

<style scoped>
	.item{
		width: 7.5rem;
		height: 2.3rem;
		background-color: #fff;
		margin: 0.2rem auto;
		border-radius: 0.15rem;
		font-size: 0.3rem;
		color: #333;
		padding-top: 0.2rem;
	}
	.item div{
		height: 0.5rem;
		line-height: 0.5rem;
		margin: 0 0.2rem;
	}
	
	.label{
		color: #666;
	}
	.value{
		margin-left: 0.1rem;
	}
	
	.status{
		float: right;
		color: #666;
	}
	
	.arr{
		width: 0.5rem;
		height: 0.5rem;
		position: relative;
		left: 6.6rem;
		top: -1rem;
	}
</style>